import { useEcharts } from '@/hooks/useEcharts';
import useStores from '@/hooks/useStores';
import React, { useRef } from 'react';
import MyCard from './mycard';

const option = {
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross',
            label: {
                backgroundColor: '#6a7985',
            },
        },
    },
    legend: {
        data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine'],
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true,
    },
    toolbox: {
        feature: {
            saveAsImage: {},
        },
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    },
    yAxis: {
        type: 'value',
    },
    series: [
        {
            color: '#37a2da',
            name: 'Email',
            type: 'line',
            smooth: true,
            stack: 'Total',
            areaStyle: {
                color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                        {
                            offset: 0.25,
                            color: '#37a2da',
                        },
                        {
                            offset: 1,
                            color: '#fff',
                        },
                    ],
                },
            },
            emphasis: {
                focus: 'series',
            },
            data: [120, 132, 101, 134, 90, 230, 210],
        },
        {
            color: '#9fe6b8',
            name: 'Union Ads',
            type: 'line',
            smooth: true,
            stack: 'Total',
            areaStyle: {
                color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                        {
                            offset: 0.25,
                            color: '#9fe6b8',
                        },
                        {
                            offset: 1,
                            color: '#fff',
                        },
                    ],
                },
            },
            emphasis: {
                focus: 'series',
            },
            data: [220, 182, 191, 234, 290, 330, 310],
        },
        {
            color: '#fedb5c',
            name: 'Video Ads',
            type: 'line',
            smooth: true,
            stack: 'Total',
            areaStyle: {
                color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                        {
                            offset: 0.25,
                            color: '#fedb5c',
                        },
                        {
                            offset: 1,
                            color: '#fff',
                        },
                    ],
                },
            },
            emphasis: {
                focus: 'series',
            },
            data: [150, 232, 201, 154, 190, 330, 410],
        },
        {
            color: '#fb7293',
            name: 'Direct',
            type: 'line',
            smooth: true,
            stack: 'Total',
            areaStyle: {
                color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                        {
                            offset: 0.25,
                            color: '#fb7293',
                        },
                        {
                            offset: 1,
                            color: '#fff',
                        },
                    ],
                },
            },
            emphasis: {
                focus: 'series',
            },
            data: [320, 332, 301, 334, 390, 330, 320],
        },
        {
            color: '#e7bcf3',
            name: 'Search Engine',
            type: 'line',
            smooth: true,
            stack: 'Total',
            areaStyle: {
                color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                        {
                            offset: 0.25,
                            color: '#e7bcf3',
                        },
                        {
                            offset: 1,
                            color: '#fff',
                        },
                    ],
                },
            },
            emphasis: {
                focus: 'series',
            },
            data: [820, 932, 901, 934, 1290, 1330, 1320],
        }]
};

const LineEcharts: React.FC = () => {
    const chartRef = useRef<HTMLDivElement>(null);
    const { themes } = useStores();
    useEcharts(chartRef, { option, style: { width: '100%', height: '600px' }, theme: themes.type });
    return (
        <MyCard title='折线图'>
            <div ref={chartRef} style={{ width: '100%', height: '600px' }}></div>
        </MyCard>
    )
}

export default LineEcharts;